<template>
  <view class="container">
    <view class="login-card">
      <text class="title">后台登录</text>
      
      <!-- 用户名输入 -->
      <view class="input-group">
        <input
          v-model="form.account"
          placeholder="用户名"
          class="input"
          placeholder-style="color: #999"
        />
        <text class="error" v-if="errors.account">{{ errors.account }}</text>
      </view>

      <!-- 密码输入 -->
      <view class="input-group">
        <input
          v-model="form.password"
          placeholder="密码"
          password
          class="input"
          placeholder-style="color: #999"
        />
        <text class="error" v-if="errors.password">{{ errors.password }}</text>
      </view>

      <!-- 登录按钮 -->
      <button 
        class="login-btn" 
        :disabled="loading"
        @click="handleLogin"
      >
        {{ loading ? '登录中...' : '登录' }}
      </button>

      <!-- 辅助链接 -->
      <view class="links">
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {baseUrl} from '../../static/js/common.js'
const form = reactive({
  account: '',
  password: '',
    auth:1
})

const errors = reactive({
  account: '',
  password: ''

})

const loading = ref(false)

const validate = () => {
  let valid = true
  errors.account = ''
  errors.password = ''

  if (!form.account.trim()) {
    errors.account = '请输入用户名'
    valid = false
  }

  if (!form.password) {
    errors.password = '请输入密码'
    valid = false
  } else if (form.password.length < 6) {
    errors.password = '密码至少6位'
    valid = false
  }

  return valid
}

const handleLogin = async () => {
  if (!validate()) return

  loading.value = true
  try {
    // 模拟登录请求
    // await new Promise(resolve => setTimeout(resolve, 1000
	
	uni.request({
		url: baseUrl + '/user/login',
		method:'POST',
		data:form,
		success: (res) => {
			if(res.data.code==400){
				uni.showToast({
					title: res.data.msg,
					icon: 'fail'
				})
			}
			else if (res.data.code==200){
				uni.showToast({
				  title: '登录成功',
				  icon: 'success'
				});
				// 这里可以添加登录成功的逻辑，比如跳转到首页
				localStorage.setItem("userInfo",JSON.stringify(res.data.data))
				localStorage.setItem("admin-token",res.data.data.token)
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		}
	})

  } catch {
    uni.showToast({ title: '登录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const navigateTo = (type) => {
  const pages = {
    forget: '/pages/forget',
    register: '/pages/register'
  }
  uni.navigateTo({ url: pages[type] })
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

.login-card {
  width: 800rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.1);
}

.title {
  display: block;
  text-align: center;
  font-size: 40rpx;
  color: #333;
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.input {
  height: 90rpx;
  padding: 0 30rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.error {
  display: block;
  color: #ff4444;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.login-btn {
  height: 90rpx;
  line-height: 90rpx;
  background: #007aff;
  color: white;
  border-radius: 8rpx;
  font-size: 34rpx;
}

.login-btn[disabled] {
  background: #a0cfff;
}

.links {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
}

.links text {
  color: #007aff;
  font-size: 28rpx;
}
</style>